<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router'
const $router=useRouter()
const props = defineProps({
  title:{
    type:String,
    default:''
  }
})
const goBack=() =>{
  $router.back()
}
</script>

<template>
  <div class="nav-bar"
    w:w="screen"
    w:flex="~ nowrap"
    w:align="items-center"
    w:bg="gray-300"
    w:text="center gray-800"
  >
    <div class="arrow iconfont icon-arrow-left" @click="goBack"
      w:m="x-8"
      w:text="4xl"
    ></div>
    <div class="title"
      w:flex="1"
      w:text="4xl"
    >{{props.title}}</div>
    <div class="action"
      w:w="w-20"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.nav-bar{
  height: 88px;
}
</style>